<template>
  <!-- <div> -->
  <div class="caaa">
    <div
      id="main"
      style="
        border: 1px solid orange;
        width: 700px;
        height: 400px;
        margin-left: 150px;
      "
    ></div>
    <div
      class=""
      style="height: 500px; width: 560px; margin-right: 150px; margin-top: 50px"
      @mouseout="mouseout"
      @mouseover="mouseover"
    >
      <el-table
        :data="tableData"
        :height="750"
        style="width: 100%; border: 2px solid orange"
        :row-class-name="tableRowClassName()"
      >
        >
        <el-table-column align="center" label="地区" prop="province">
        </el-table-column>
        <el-table-column align="center" label="物种名" prop="name">
        </el-table-column>
        <el-table-column align="center" label="灭绝年份" prop="date">
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ModernPage',

  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
      ],
    }
  },
  created() {
    // window.addEventListener('load', this.doEcharts)
  },
  mounted() {
    this.doEcharts()
  },

  methods: {
    doEcharts() {
      const option = {
        xAxis: {
          type: 'category',
          data: [
            '1500',
            '1600',
            '1730',
            '1810',
            '1850',
            '1890',
            '1930',
            '1970',
            '2010',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [3, 1, 1, 1, 1, 8, 2, 1],
            type: 'line',
          },
        ],
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      option && myChart.setOption(option)
    },
    mouseover() {
      clearInterval(this.timer)
    },
    mouseout() {
      this.autoScroll(false)
    },
    autoScroll(init) {
      this.$nextTick(() => {
        const t = 50
        const box = this.$el.querySelector('.el-table__body-wrapper')
        const content = this.$el.querySelector('.el-table__body')
        if (init) box.scrollTop = 0
        this.timer = setInterval(() => {
          this.rollStart(box, content)
        }, t)
      })
    },
    rollStart(box, content) {
      if (box.scrollTop >= content.scrollHeight - box.offsetHeight) {
        box.scrollTop = 0
      } else {
        box.scrollTop++
      }
    },
    tableRowClassName() {
      return 'my-table'
    },
  },
}
</script>

<style lang="scss" scoped>
.caaa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.caa {
  flex: 1;
}
#main {
  width: 300px;
  height: 500px;
}
.my-table th {
  border: none;
}
.my-table td,
.my-table th.is-leaf {
  border: none;
}
/* 表格最外边框 */
.el-table--border,
.el-table--group {
  border: none;
}
/* 头部边框 */
.my-table thead tr th.is-leaf {
  border-bottom: 1px solid #ebeef5;
  border-right: none;
}
.my-table thead tr th:nth-last-of-type(2) {
}
/* 表格最外层边框-底部边框 */
.el-table--border::after,
.el-table--group::after {
  width: 0;
}
.my-table::before {
  width: 0;
}
.my-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
/* 表格有滚动时表格头边框 */
.el-table--border th.gutter:last-of-type {
  border: 1px solid #ebeef5;
  border-left: none;
}
</style>
